<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<!-- 背景色区域 -->
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
				<view class="model">
					<view class="cordTop">
						<view class="cordBox">
							<text class="cordBoxTtle">请配送员扫码完成配送验签</text>
							<view class="cordLine" :style="'background: url('+url()+'/wximg/dotted.png);'"></view>
							<view class="gradient"></view>
							<view class="cordToplf"></view>
							<view class="cordToprt"></view>
						</view>
						<view class="cordBox1">  
							<view class="cordbottomlf"></view>
							<view class="cordbottomrt"></view>
						</view>
						<view class="codeBox">
							<view class="qrimg">
								<!-- 二维码遮罩层 -->
								<view v-if="ershowon" class="masked"  @click="renovate" >
									<text class="countdown" style="color:red; font-weight: bold;">二维码已失效！</text>
								</view>
								<view class="qrimg-i">
									<tki-qrcode 
									v-if="ifShow" 
									cid="qrcode1" 
									ref="qrcode" 
									:val="val" 
									:size="size" 
									:unit="unit" 
									:background="background" 
									:foreground="foreground" 
									:pdground="pdground" 
									:icon="icon" 
									:iconSize="iconsize" 
									:lv="lv" 
									:onval="onval" 
									:loadMake="loadMake" 
									:usingComponents="true"
									 @result="qrR" 
									 />
									 </view>
							</view>
							<!-- 二维码倒计时文字-->
							<view v-if="ershowon==false" >
								<text  class="countdown">二维码失效倒计时</text>
								<countdown  @reque="reque" :startTime="startTime" :endTime="enTime" />
							</view>
							<view  v-if="ershowon" >
								<text class="countdown">请点击二维码刷新</text>
							</view>
						</view>
					</view>
  
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js";
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import {getQRCodeTimeLimit} from '@/api/request.js';
	import url from '@/api/url.js';
	export default {
		components: {tkiQrcode,countdown},
		data() {
			return {
			url:url,
			startTime:'2020-01-18 16:11:00',
			enTime:'2020-01-18 16:11:01',
			ifShow: true,
			ershowon:false,
			time:1,//二维码有效时间
			val: '', // 要生成的二维码值
			size: 400, // 二维码大小 
			unit: 'upx', // 单位
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			pdground: '#000000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '' ,// 二维码生成后的图片地址或base64，，
			optionsData:"",
			}
		},
		onLoad(options) {
				let data= JSON.parse(decodeURIComponent(options.data));//上级信息
					this.time=parseInt(data.time);
					let  date=new Date();
					let min=date.getMinutes();
					this.startTime=util.dateFtt(date,'yyyy-MM-dd HH:mm:ss');
					date.setMinutes(min+this.time);
					this.enTime=util.dateFtt(date,'yyyy-MM-dd HH:mm:ss');
						
				
					data.startTime=this.startTime;
					data.enTime=this.enTime;
					this.optionsData=data;
					console.log(data);
					this.val=JSON.stringify(data);
				/* 	this.creatQrcode(); */
		
		},
		methods: {
			backlast() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			sliderchange(e) {
				this.size = e.detail.value
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			saveQrcode() {
				this.$refs.qrcode._saveCode()
			},
			qrR(res) {
				this.src = res
			},
			clearQrcode() {
				this.$refs.qrcode._clearCode()
				this.val = ''
			},
			ifQrcode() {
				this.ifShow = !this.ifShow
			},
			renovate (){
				this.ershowon=false;
				let  date=new Date();
				let min=date.getMinutes();
				this.startTime=util.dateFtt(date,'yyyy-MM-dd HH:mm:ss');
				date.setMinutes(min+this.time);
				this.enTime=util.dateFtt(date,'yyyy-MM-dd HH:mm:ss');
				let data= this.optionsData
				data.startTime=this.startTime;
				data.enTime=this.enTime;
				this.val=JSON.stringify(data);
				/* this.creatQrcode(); */
				this.$refs.qrcode._makeCode(this.val)
			},
			selectIcon() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					/* sourceType: ['album'], //从相册选择 */
					success: function (res) {
						that.icon = res.tempFilePaths[0]
						setTimeout(() => {
							that.creatQrcode()
						}, 100);
						// console.log(res.tempFilePaths);
					}
				});
			},
			reque(){
				this.ershowon=true;
			}
		}

	}
</script>

<style scoped>
	.qrimg {
		display: flex;
		justify-content: center;
		position: relative;
	}
	.qrimg-i{
		margin-right: 2px;
	}
	.masked {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.codeBox {
		position: relative;
		width: 100%;
		min-height: 400upx;
		padding: 50upx 0 120upx;
		z-index: 2;
		background-color: #fff;
		/* 定义flex容器 */
		display: flex;
		flex: 1;
		/*设置容器内部容器的排列方向*/
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.code {
		width: 364upx;
		height: 364upx;
		background-color: red;
	}

	.model {
		width: 94%;
		position: absolute;
		bottom: 78upx;
		left: 3%;
	}

	.cordTop {
		width: 86%;
		padding: 0 2%;
		height: 30upx;
		background: #060606;
		border: solid 24upx #f7bf3d;
		border-radius: 10upx;
	}

	/**/
	.cordBox {
		width: 100%;
		height: 120upx;
		margin-top: 10upx;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	/*title */
	.cordBoxTtle {
		width: 100%;
		line-height: 120upx;
		font-size: 32upx;
		text-align: center;
		z-index: 999;
	}

	/* 虚线 */
	.cordLine {
		width: 84%;
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 8%;
		z-index: 100;
	}

	/* 阴影 */
	.gradient {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 60upx;
		z-index: 900;
		background: linear-gradient(to bottom, rgba(209, 209, 209, 1) 0%, rgba(237, 237, 237, .2) 60%, #ffffff 100%);
	}

	.cordToplf {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 50%;
		height: 120upx;
		background-image: radial-gradient(circle at left bottom, transparent, transparent 10px, #fff 11px),
			radial-gradient(circle at left top, #fff, #fff 10px, transparent 11px);
	}

	.cordToprt {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		width: 50%;
		height: 120upx;
		background-image: radial-gradient(circle at right bottom, transparent, transparent 10px, #fff 11px),
			radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px);
	}

	/* */
	.cordBox1 {
		width: 100%;
		height: 60upx;
		position: relative;
		display: flex;
		flex-direction: row;
	}

	.cordbottomlf {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 50%;
		height: 120upx;
		background-image: radial-gradient(circle at left top, transparent, transparent 10px, #fff 11px),
			radial-gradient(circle at left bottom, #fff, #fff 10px, transparent 11px);
	}

	.cordbottomrt {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		width: 50%;
		height: 120upx;
		background-image: radial-gradient(circle at right top, transparent, transparent 10px, #fff 11px),
			radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px);
	}

	.onlyOne {
		display: flex;
		align-items: center;
	}
	/* 倒计时 */
	.countdown {
		color: #666;
		text-align: center;
		line-height: 30px;
		display:block;
	}
</style>
